<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		/*
			通过传递buffer 32（js默认是64）位数组类型的数据画一个三角形


		*/ 
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")   

		let vertexShader=` 
			attribute vec2 a_position;
			//uniform float u_size;
			void main(){
				gl_Position=vec4(a_position,0.0,1.0);
				//gl_PointSize=u_size;
			}
		`;
		let fragementShader=`
			//接受js环境的变量值
			precision mediump float;
			uniform vec3 u_color;
			void main(){
				gl_FragColor=vec4(u_color,1.0);
			} 
		`;   

		//初始化变量
		initShader(gl,vertexShader,fragementShader);

		//定义清空后的颜色值	
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 	  
		
		//设置颜色
		let u_color=gl.getUniformLocation(gl.program,'u_color');
		gl.uniform3f(u_color,1.1,1.0,0.0);



		//顶点数组信息
		let vertexAry=[
			-0.5,0.0,
			0.0,0.5,
			0.0,0.0,
		]
		//将64位转化成32位
		 vertexAry=new Float32Array(vertexAry); 
		// 创建buffer数组
		let buffer=gl.createBuffer();
		//绑定buffer
		gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
		//绑定数据
		gl.bufferData(gl.ARRAY_BUFFER,vertexAry,gl.STATIC_DRAW);
			
		//获取vertex下的position变量
		let a_position=gl.getAttribLocation(gl.program,'a_position');
		//bufferAry绑定数据
		gl.vertexAttribPointer(
			a_position,
			2,//将vertexAry数组定义为两个数是一组
			gl.FLOAT,
			false,
			0,
			0
		);
		
		console.log();
		//确认给a_position赋值
		gl.enableVertexAttribArray(a_position);

		//三个点
		gl.drawArrays(gl.TRIANGLES,0,3);  


	</script>
</html>